import { StyleSheet, Text, View } from "react-native";
import { Pressable, ScrollView } from "react-native-gesture-handler";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";

const styles = StyleSheet.create({
  tabsContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
  },
  tabText: {
    fontSize: 16,
    padding: 12,
  },
  activeTabText: {
    fontSize: 20,
    padding: 8,
    fontWeight: "bold",
  },
  tabsRight: {
    paddingLeft: 18,
    paddingRight: 18,
  }
})

type TabItem = {
  key: string
  title: string
}

type TabsProps = {
  items: TabItem[],
  activeKey: string,
  onChange: (key: string) => void
}

export default function Tabs({ items, activeKey, onChange }: TabsProps) {
  return (
    <View style={styles.tabsContainer}>
      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
        {items.map((item) => (
          <Pressable key={item.key} onPress={() => onChange(item.key)}>
            <Text style={{
              ...styles.tabText,
              ...(item.key === activeKey ? styles.activeTabText : {})
            }}>{item.title}</Text>
          </Pressable>

        ))}
      </ScrollView>
      <View style={styles.tabsRight}>
        <Icon name="sort-variant" size={20} color="black" />
      </View>
    </View>
  );
}
